
  <template>
  <div class="bf-commont-template">
    <div style="padding: 0 16px ;">
      <h3>下拉选择框</h3>
      <p>该页面代码已经自动生成，按照普通码 表增删改查 为基础生成模板</p>
      <p>生成代码对应的 vue 文件路径：D:\Zmyitem\vue-element-admin\src\beneform4j\view\demo\combo.vue</p>
      <el-alert title="注意：表格内数据为模拟数据, 如果数据格式不对，请先进行格式转换。 模拟数据文件路径：src/mock/demo.js" type="warning"> </el-alert>
    </div>

    <div class="clearfix bf-top-button">
      <div class="float-l">
        <el-button @click="showAdd" type="primary">新增</el-button>
      </div>
      <div class="float-r">
        <div class="float-l">
          <el-input
            placeholder="请输入搜索内容"
            prefix-icon="el-icon-search"
            v-model="searchData"
            @keyup.enter.native="quickSearch"
          ></el-input>
        </div>
        <div class="float-l padding-l">
          <el-button @click="showSearch" type="primary">高级筛选</el-button>
        </div>
      </div>
    </div>

    <bf-table
      :data="userData"
      :setting="setting"
      :rowAction="rowAction"
      @editSubmit="editSubmit"
      @pageChange = "pageChange"
      :editRules = "editRules"
      ref="table"
    ></bf-table>
  </div>
</template>

<script>
import request from '@/utils/request'
export default {
  data() {
    return {
      searchData: '',
      userData: {
      },
      rowAction: [
        {
          label: '查看',
          click: (item) => {
            this.$refs.table.showDetail(item)
          }
        },
        {
          label: '编辑',
          click: (item) => {
            this.$refs.table.showEdit(item)
          }
        },
        {
          label: '删除',
          click: (item) => {
            this.$refs.table.showDelete(item)
          }
        }
      ],
      setting: [
        {
          field: 'name',
          title: '用户名称',
          type: 'text',
          searchable: true
        },
        {
          field: 'roleName',
          title: '用户角色',
          type: 'text',
          searchable: true
        },
        {
          field: 'introduction',
          title: '用户介绍',
          type: 'text'
        },
        {
          field: 'avatar',
          title: '用户连接',
          type: 'text'
        }
      ],
      editRules: {
        name: [
          { required: true, message: '请输入用户名称', trigger: 'blur' },
          { min: 3, max: 20, message: '长度在 3 到 20个字符', trigger: 'blur' }
        ],
        roleName: [
          { required: true, message: '请输入用户角色', trigger: 'blur' },
          { min: 3, max: 20, message: '长度在 3 到 20个字符', trigger: 'blur' }
        ]
      }
    }
  },
  mounted: function() {
    this.searchList()
  },
  methods: {
    searchList() {
      request({
        url: '/demo/demo/demo',
        method: 'get'
      }).then((response) => {
        this.userData = response
      })
    },
    editSubmit(params, formType, formList) {
      // console.log(params, formType, formList)
    },
    pageChange(pageObj) {
      // console.log(pageObj)
    },
    showSearch() {
      this.$refs.table.showSearch()
    },
    showAdd() {
      this.$refs.table.showAdd()
    },
    quickSearch() {
      // const params = {
      //   userId: this.searchData
      // }
      // console.log(params)
    }
  }
}
</script>

<style scoped>

</style>
